<gm:page title="Mashup" css="/css/g.css" class="googleTheme" onload="init()">

 <script>
    var Xmap;
    var Xlist;
    var Xitem;
    var apiDirectionsObj;
    
    function init() {
      Xmap = google.mashups.getObjectById("Xmap");

      Xmap.getMap().addOverlay(new GGeoXml("http://earthquake.usgs.gov/eqcenter/catalogs/eqs7day-M2.5.xml"));

    }
  </script>

  <div class="gm-app-header">
    <table>
      <tr>
        <td width="200"><h1>Mashup</h1></td>
      </tr>
    </table>
  </div>

  <table width="900">
    <tr valign="top">
      <td width="300">
        <gm:list id="myList" data="http://www.mapnut.com/calstatepark.xml" pagesize="10">
          <gm:handleEvent src="myMap" event="select"/>
        </gm:list>
      </td>
      <td class="mainPanel">
        <gm:map id="myMap" height="500px" data="${myList}" latref="geo:lat" lngref="geo:long" infotemplate="detailTemplate">
          <gm:handleEvent src="myList" event="select"/>
        </gm:map>
      </td>
    </tr>    
  </table>

  <gm:template id="detailTemplate">
    <div repeat="true">
      <b><gm:text ref="atom:title"/></b><br/>
      <gm:text ref="geo:lat"/><br/>
      <gm:text ref="geo:long"/>
    </div>
  </gm:template>

</gm:page>
